<template>
	<scroll-view scroll-y="true" :scroll-top="0" class="container">
		<!-- van-swipe-cell :right-width="0"  有问题 -->
		<view class="item" v-for="(item, index) in notesList" :key="item.send.sendId" @longpress="longpress(item.send.sendId)">
			<view class="c-item">
				<beiwang :note="item" @editBtn="editBtn" @clickBtn="clickBtn($event, item)" :active-box="acitveBox" @add="addNoteItem(item.send.sendId)"></beiwang>
				<van-overlay :show="longPressId == item.send.sendId" @click="closeLongpress()" >
					<view class="flex-algin-center">
						<view  class="flex-row">
							<view class="right_item" style="background-color: rgba(225,58,162,0.7);" @click="getOffer(item.send)">
								拿到
								<br />
								offer
							</view>
							<view class="right_item" style="background-color: rgba(41,119,208,0.7);" @click="stopProcess(item.send)">
								{{item.send.success == -1 ? '恢复' : '终止'}}
								<br />
								{{'进程'}}
							</view>
							<view class="right_item" style="background-color: rgba(153,153,153,0.7);" @click="deleteProcess(item.send)">
								删除
								<br />
								进程
							</view>
						</view>
					</view>
				</van-overlay>
			</view>
		</view>

		<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" :popMenu="false" @fabClick="showPopup()" />
		<!-- 新增备忘 -->
		<van-popup :show="showAddNotes" @close="onClose()">
			<view class="dialog">
				<view class="title">新增备忘</view>
				<view class="cell_area">
					<van-cell-group>
						<van-field :value="sendObj.companyName" @input="changAddCompanyName" placeholder="请输入公司" required clearable label="公司" />
						<van-field :value="sendObj.workName" @input="changAddWorkName" placeholder="请输入职位" required clearable label="职位" />
						<van-field :value="sendObj.place" @input="changAddPlace" placeholder="请输入地点" required clearable label="地点" />
						<van-field :value="sendObj.salary" @input="changAddSalary" placeholder="请输入薪资" required clearable label="薪资" />
					</van-cell-group>
				</view>

				<!-- 提交按钮 -->
				<view class="submit_btn"><button type="primary" size="mini" class="confirm_btn" @click="addSend">确定</button></view>
			</view>
		</van-popup>
		<van-dialog id="van-dialog" />
		<!-- 编辑和添加 根据title区分 -->
		<van-popup :show="showDialog" @close="closeDialog()">
			<view class="dialog">
				<view class="title">{{ title }}</view>
				<view class="cell_area">
					<van-cell-group>
						<van-field placeholder="请选择日期" readonly @click-input="showDate = true" :value="$utils.secondsToYMD(activeItem.itemDate)" required clearable label="日期"  />
						<van-field placeholder="请输入描述" :value="activeItem.itemName" @input="e => (activeItem.itemName = e.detail)" required clearable label="描述" />
					</van-cell-group>
				</view>

				<!-- 提交按钮 -->
				<view class="submit_btn"><button type="primary" size="mini" class="confirm_btn" @click="confirm_btn">确定</button></view>
			</view>
		</van-popup>

		<van-action-sheet :show="showOperator" :actions="operators" @select="selectOperator" cancel-text="取消" @close="closeOperator()" @cancel="closeOperator()" />
		<van-notify id="van-notify" />
		<van-action-sheet :show="showDate" title="选择日期" @close="showDate = false" @cancel="showDate = false">
			<van-datetime-picker type="date" :value="form.date" @confirm="dateChange" />
		</van-action-sheet>
		<!-- @close="onClose"   @select="onSelect" -->
	</scroll-view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import beiwang from '../../components/beiwang.vue';
import Notify from '@/wxcomponents/vant-weapp/notify/notify';
import Dialog from '@/wxcomponents/vant-weapp/dialog/dialog';

export default {
	components: {
		beiwang
	},

	data() {
		return {
			showDate: false, // 日期选择框
			sendObj: {
				companyName: '',
				salary: '',
				workName: '',
				success: 0,
				place: ''
			},
			activeItem: {
				itemDate: '',
				itemName: '',
				itemId: null
			},
			activeSend : {},
			name2Obj: {
				companyName: '公司',
				workName: '职位',
				place: '地点',
				salary: '薪资'
			},
			notesList: [], // 备忘列表
			showLongpress: false,
			operators: [
				{
					name: '编辑'
				},
				{
					name: '上一步',
					color: '#1989fa'
				},
				{
					name: '下一步',
					color: '#07c160'
				},
				{
					name: '删除',
					color: '#ee0a24'
				},
			],
			title: '添加',
			showDialog: false,
			showOperator: false,
			acitveBox: '',
			showAddNotes: false, // 新增备忘
			pattern: {
				buttonColor: '#666FFC'
			},
			longPressId: '' // 长按的id
		};
	},
	computed: {
		...mapState(['userInfo', 'hasLogin']),
	},
	onShow() {
		// 没有登录
		if (!this.hasLogin) {
			uni.switchTab({ url: '/pages/mine/mine' });
			return;
		}
		// console.log(this.hasLogin);
		this.init();
	},
	methods: {
		init() {
			uni.request({
				url: 'https://hotenergy.club/workapp/send/get_all/' + this.userInfo.userId,
				method: 'GET',
				success: res => {
					this.notesList = res.data;
					// console.log(this.notesList);
				}
			});
		},
		// moreItemAction() {
		// 	if(this.activeItem.sta == 0)
		// },
		confirm_btn() {
			if(this.checkEmpty(this.activeItem.itemDate)) {
				Notify({ type: 'warning', message: `请输选择日期` });
				return ;
			} 
			if(this.checkEmpty(this.activeItem.itemName)) {
				Notify({ type: 'warning', message: `请选择描述` });
				return ;
			}
			
			if (this.title == '编辑') {
				// console.log('编辑');
				// console.log(this.activeItem);

				uni.request({
					url: 'https://hotenergy.club/workapp/send_item/update_item',
					method: 'POST',
					data: this.activeItem,
					success: res => {
						this.init();
						this.showDialog = false;
					}
				});
			} else {
				this.activeItem.itemId = null;
				// console.log(this.activeItem);
				uni.request({
					url: 'https://hotenergy.club/workapp/send_item/add',
					method: 'POST',
					data: this.activeItem,
					success: res => {
						this.init();
						this.showDialog = false;
					}
				});
				// console.log('添加');
			}
		},
		checkEmpty(str) {
			return str == null || str == '';
		},
		addSend() {
			for (let key in this.name2Obj) {
				if (this.checkEmpty(this.sendObj[key])) {
					Notify({
						message: '请输入' + this.name2Obj[key],
						type: 'warning'
					});
					return;
				}
			}
			this.sendObj.userId = this.userInfo.userId;
			uni.request({
				url: 'https://hotenergy.club/workapp/send/add',
				method: 'POST',
				data: this.sendObj,
				success: res => {
					if (res.statusCode == 200) {
						Notify({
							message: '新增备忘成功',
							type: 'success'
						});
						this.showAddNotes = false;
						this.init()
					}
				}
			});
		},
		closeLongpress() {
			this.longPressId = '';
			// this.showLongpress = false;
		},
		longpress(id) {
			this.longPressId = id;
			this.showLongpress = true;
		},
		closeDialog() {
			this.showDialog = false;
		},
		addNoteItem(id) {
			this.title = '添加';
			// 初始化数据
			this.activeItem.sendId = id;
			this.activeItem.itemName = '';
			this.activeItem.itemDate = '';
			this.activeItem.sta = 0;
			this.showDialog = true;
		},
		clickBtn(data, send) {
			if(send.success == -1) return ;
			// console.log(data, send);
			this.activeSend = send
			this.activeItem = data;
			this.showOperator = true;
		},
		editBtn() {
			this.title = '编辑';
			this.activeItem.sendId = null;
			this.showDialog = true;
		},
		showPopup() {
			this.showAddNotes = true;
		},

		onClose() {
			this.showAddNotes = false;
		},
		getOffer(send) {
			uni.request({
				url: `https://hotenergy.club/workapp/send/success/${send.sendId}`,
				method: 'POST',
				success: res => {
					Notify({ type: 'success', message: `恭喜你拿到${send.companyName}的offer！！！` });
					this.init()
				}
			});
		},
		stopProcess(send) {
			if(send.success == -1) {
				uni.request({
					url: 'https://hotenergy.club/workapp/send/next_step/' + send.sendId,
					method: 'GET',
					success: (res) => {
						Notify({ type: 'success', message: `恢复${send.companyName}进程成功` });
						this.init()
					}
				})
			} else {
				uni.request({
					url: `https://hotenergy.club/workapp/send/end/${send.sendId}`,
					method: 'GET',
					success: res => {
						Notify({ type: 'success', message: `终止${send.companyName}进程成功` });
						this.init()
					}
				});
			}
		},
		deleteProcess(send) {
			Dialog.confirm({
			  title: '提示',
			  message: `确定删除${send.companyName}进程吗`,
			})
			  .then(() => {
			    uni.request({
			    	url: `https://hotenergy.club/workapp/send/delete/${send.sendId}`,
			    	method: 'DELETE',
			    	success: res => {
			    		Notify({ type: 'success', message: `删除${send.companyName}进程成功` });
						this.init()
			    	}
			    });
			  }).catch((err)=>{
				  
			  })
		},
		closeOperator() {
			this.showOperator = false;
		},
		selectOperator(e) {
			switch (e.detail.name) {
				case '编辑':
					this.title = '编辑';
					this.showDialog = true;
					break;
				case '删除':
					Dialog.confirm({
						title: '删除备忘事项',
						message: '确定要删除吗？'
					})
						.then(() => {
							// console.log(this.activeItem)
							uni.request({
								url: 'https://hotenergy.club/workapp/send_item/delete/' + this.activeItem.itemId,
								method: 'DELETE',
								success: res => {
									Notify({
										message: '删除备忘事项成功',
										type: 'success'
									});
									this.init()
								}
							});
						})
						.catch(() => {
							// on cancel
						});
					
					break;
				case '上一步':
				if(this.activeSend.send.success == 0) {
					Notify({ type: 'warning', message: '当前投递不能上一步了~' });
				} else {
					uni.request({
						url: 'https://hotenergy.club/workapp/send/last_step/' + this.activeSend.send.sendId,
						method: 'GET',
						success: (res) => {
							this.activeSend.send.success--;
						}
					})
				}
				break;
				case '下一步':
				if(this.activeSend.send.success == this.activeSend.items.length) {
					Notify({ type: 'success', message: '当前投递已经完成了~' });
				} else {
					uni.request({
						url: 'https://hotenergy.club/workapp/send/next_step/' + this.activeSend.send.sendId,
						method: 'GET',
						success: (res) => {
							this.activeSend.send.success++;
						}
					})
				}
				break;
				
			}
			this.closeOperator();
		},
		changAddCompanyName(e) {
			this.sendObj.companyName = e.detail;
		},
		changAddWorkName(e) {
			this.sendObj.workName = e.detail;
		},
		changAddPlace(e) {
			this.sendObj.place = e.detail;
		},
		changAddSalary(e) {
			this.sendObj.salary = e.detail;
		},
		dateChange(e) {
			// console.log(e, this.$utils.secondsToAllDate(e.detail));
			this.activeItem.itemDate = this.$utils.secondsToAllDate(e.detail);
			this.showDate = false;
		}
	}
};
</script>

<style>
.container {
	width: 100%;
	height: 100vh;
}
.c-item {
	width: 95%;
	margin: 0 auto;
}
.title {
	text-align: center;
	font-weight: 500;
	/* border-radius: 20rpx 20rpx 0 0; */
	padding: 16rpx 8rpx;
	color: #fff;
	background-color: #666ffc;
}

.cell_area {
	padding: 16rpx;
}

.width {
	width: 600rpx;
}

.submit_btn {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 8rpx 0 20rpx;
}

.confirm_btn {
	background-color: #666ffc !important;
}

.van-cell__title {
	max-width: 50px !important;
	min-width: 50px !important;
}

.van-field__input {
	border-bottom: 1px solid #999 !important;
}

.right_btn {
	height: 100%;
}

.add-form {
	width: 100rpx;
	margin: 0 auto;
}

.flex-row {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-around;
	/* background-color: rgba(77, 77, 77, 0) !important; */
}
.right_item {
	height: 100rpx;
	line-height: 50rpx;
	padding: 18rpx;
	width: 107rpx;
	color: #ffffff;
	text-align: center;
	font-size: 13px;
	margin: 8rpx;
	border-radius: 50%;
}
.dialog {
	width: 600rpx;
	/* background-color: white; */
}
.item {
	height: auto;
	display: block;
}
.flex-algin-center {
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
}
</style>
